import React, { useEffect, useMemo, useState } from 'react';
import { useUpdateEffect, useDebounceFn } from '@umijs/hooks';
import _ from 'lodash';

const Connect = (fn, useModel) => {
  return WrappedComponent => {
    return props => {
      const { state, ...rest } = useModel();
      const [memoState, setMemoState] = useState({ ...props, ...fn(state) });

      useUpdateEffect(() => {
        let isEqual = _.isEqual({ ...props, ...fn(state) }, memoState);
        if (!isEqual) {
          setMemoState({ ...props, ...fn(state) });
        }
      }, [state, props]);

      return useMemo(() => {
        return <WrappedComponent {...props} {...memoState} {...rest} />;
      }, [memoState]);
    };
  };
};
export default Connect;
